<template>
    <section class="chat-group-wrapper">
        <el-scrollbar height="620px">
            <p style="" class="contact-title">
                <span>新的朋友</span>
            </p>
            <section class="chat-group-item" @click="toggleGroup({ friendsType: 'newFriends', name: '新的朋友' }, index)"
                :class="[(friendsType === 'newFriends') ? 'active-item' : '']">
                <el-badge :value="chatState.newRequestList.length" v-if="chatState.isShowBadge" class="item">
                    <el-icon size="40" color="#296218">
                        <svg t="1722438031301" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            style="min-height: 40px;" xmlns="http://www.w3.org/2000/svg" p-id="908" width="128"
                            height="128">
                            <path
                                d="M893.824 1021.824H130.176a128 128 0 0 1-128-128V130.176a128 128 0 0 1 128-128h763.648a128 128 0 0 1 128 128v763.648a128 128 0 0 1-128 128zM563.2 676.096a132.096 132.096 0 0 1 8.96-47.872l-17.024-6.656a130.56 130.56 0 0 1-33.28-18.56c-6.016-5.888-5.632-19.712 0-37.504s69.76-89.6 69.76-155.264c0-101.248-66.56-183.168-148.48-183.168s-148.608 81.92-148.608 183.168c0 62.72 57.472 137.472 64 151.04A44.8 44.8 0 0 1 358.4 601.6a125.824 125.824 0 0 1-39.168 18.944l-113.408 51.2a69.376 69.376 0 0 0-47.232 62.72v12.8c0 30.72 25.6 49.536 55.68 49.536H640a132.992 132.992 0 0 1-76.8-120.704z m169.344-145.792a133.376 133.376 0 1 0 133.248 133.376 133.376 133.376 0 0 0-133.248-133.376zM806.4 663.68a11.392 11.392 0 0 1-11.264 11.264h-51.2v51.84a11.392 11.392 0 0 1-22.656 0v-51.84h-51.968a11.264 11.264 0 1 1 0-22.528h51.84v-51.2a11.392 11.392 0 1 1 22.656 0v51.2h51.2a11.264 11.264 0 0 1 11.392 11.264z"
                                fill="#F89C47" p-id="909"></path>
                        </svg>
                    </el-icon>
                </el-badge>
                <img style="max-width: 100px; height: 100px;" src="../assets/images/invite.png">
                <!-- <el-icon size="40" color="#296218" v-else>
                    <svg t="1722438031301" class="icon" viewBox="0 0 1024 1024" version="1.1" style="min-height: 40px;"
                        xmlns="http://www.w3.org/2000/svg" p-id="908" width="128" height="128">
                        <path
                            d="M893.824 1021.824H130.176a128 128 0 0 1-128-128V130.176a128 128 0 0 1 128-128h763.648a128 128 0 0 1 128 128v763.648a128 128 0 0 1-128 128zM563.2 676.096a132.096 132.096 0 0 1 8.96-47.872l-17.024-6.656a130.56 130.56 0 0 1-33.28-18.56c-6.016-5.888-5.632-19.712 0-37.504s69.76-89.6 69.76-155.264c0-101.248-66.56-183.168-148.48-183.168s-148.608 81.92-148.608 183.168c0 62.72 57.472 137.472 64 151.04A44.8 44.8 0 0 1 358.4 601.6a125.824 125.824 0 0 1-39.168 18.944l-113.408 51.2a69.376 69.376 0 0 0-47.232 62.72v12.8c0 30.72 25.6 49.536 55.68 49.536H640a132.992 132.992 0 0 1-76.8-120.704z m169.344-145.792a133.376 133.376 0 1 0 133.248 133.376 133.376 133.376 0 0 0-133.248-133.376zM806.4 663.68a11.392 11.392 0 0 1-11.264 11.264h-51.2v51.84a11.392 11.392 0 0 1-22.656 0v-51.84h-51.968a11.264 11.264 0 1 1 0-22.528h51.84v-51.2a11.392 11.392 0 1 1 22.656 0v51.2h51.2a11.264 11.264 0 0 1 11.392 11.264z"
                            fill="#F89C47" p-id="909"></path>
                    </svg>
                </el-icon> -->
                <section class="group-info-wrapper">
                    <p class="group-message">新的朋友</p>
                </section>
            </section>

            <p class="flex-row-c-s contact-title">
                <span>群组</span>
                <el-icon class="add-contact-icon" v-if="chatState.getUserInfo()?.roles != null" size="16"
                    @click="dialogVisible = true">
                    <el-tooltip class="box-item" effect="dark" content="创建群" placement="bottom">
                        <Plus />
                    </el-tooltip>
                </el-icon>
            </p>
            <section class="chat-group-item" @click="toggleGroup(g, index)" v-for="(g, index) of chatState.group"
                :key="g.id" :class="[(friendsType === 'groupChat' && currentChat === index) ? 'active-group' : '']">
                <img style="width: 28px;height: 28px;" v-if="g.groupAvatar" :src="g.groupAvatar" alt="">
                <img v-else src="../assets/images/group.png" alt="">
                <!-- <el-icon size="40" color="#296218">
                    <svg t="1722762116831" class="icon" viewBox="0 0 1109 1024" version="1.1" style="min-height: 40px;"
                        xmlns="http://www.w3.org/2000/svg" p-id="939">
                        <path
                            d="M848.042667 542.976c-4.010667 0-44.202667 8.021333-16.128-72.362667 56.32-80.384 100.522667-148.650667 100.522666-245.077333C932.437333 80.896 836.010667 8.533333 723.456 8.533333c-20.053333 0-40.106667 4.010667-56.234667 8.021334 44.202667 40.192 72.362667 96.426667 72.362667 180.906666 0 104.362667-24.149333 200.789333-88.405333 289.28-24.149333 32.085333-16.128 80.298667 8.021333 88.32 136.533333 36.181333 253.098667 128.597333 285.269333 217.002667l4.010667 24.064c0 36.181333-44.202667 68.266667-60.245333 88.405333 124.586667-12.032 212.906667-44.202667 212.906666-120.490666v-28.16c4.010667-76.373333-132.608-172.8-253.098666-212.906667z"
                            fill="#F58D23" p-id="940"></path>
                        <path
                            d="M562.773333 615.253333c-8.021333-4.010667-44.202667-20.053333-20.138666-92.416 64.341333-64.256 112.554667-172.8 112.554666-277.248C655.189333 84.906667 550.741333 0.512 426.154667 0.512 301.568 4.522667 197.12 88.917333 197.12 245.589333c0 104.448 48.213333 208.981333 112.469333 277.333334 24.149333 64.170667-20.053333 88.32-28.16 92.330666C153.002667 663.466667 0.341333 747.861333 0.341333 832.256v32.085333c-4.010667 116.565333 221.013333 140.629333 425.813334 140.629334 204.970667 0 425.984-24.064 425.984-140.629334v-32.085333c0-84.48-152.746667-172.8-289.28-217.002667z"
                            fill="#F58D23" p-id="941"></path>
                    </svg>
                </el-icon> -->
                <section class="group-info-wrapper">
                    <p class="group-message">{{ g.groupName }}</p>
                </section>
            </section>

            <p class="contact-title">好友列表</p>

            <template v-for="(g, index) of chatState.contacts" :key="g.id">
                <section class="chat-group-item"
                    :class="[(currentChat === index && friendsType == '' && friendsType == '') ? 'active-group' : '']"
                    @click="toggleGroup(g, index)">
                    <img class="group-item-avarta" @error="defaultAvatar" :src="g.friendAvatar" alt="">
                    <section class="group-info-wrapper">
                        <p class="group-item-name-time">
                            <span class="group-item-name">{{ g.friendNickname }}</span>
                        </p>
                    </section>
                </section>
            </template>
        </el-scrollbar>
        <el-dialog style="padding: 20px !important; " append-to-body align-center center v-model="dialogVisible"
            title="创建群" width="30%" :before-close="handleClose">
            <section style="width: 100%;">
                <p>群名称：</p>
                <el-input v-model="name" style="width: 100%; margin-top: 15px;" placeholder="请输入群名称"></el-input>
                <p style="margin-top: 20px">群介绍：</p>
                <el-input v-model="introduce" style="width: 100%; margin-top: 15px;" placeholder="请输入群介绍"></el-input>
            </section>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="confirmHandle">确认</el-button>
                </span>
            </template>
        </el-dialog>
    </section>
</template>

<script setup>
import { ChatMessage } from '@/stores/chat';
import { defaultAvatar } from '@/utils';
import { Plus } from "@element-plus/icons-vue";
import { ElNotification } from 'element-plus';
const chatState = ChatMessage()
const emit = defineEmits(['toggleContact'])
// const avatar = ref('')
const name = ref('')
const introduce = ref('')
const friendsType = ref('newFriends')
const currentChat = ref(0)
const dialogVisible = ref(false)

const toggleGroup = (g, n) => {
    if (g.friendsType === 'newFriends') {
        friendsType.value = 'newFriends'
        emit('toggleContact', g)
        currentChat.value = -1
        return
    }
    if (g.friendsType === 'groupChat') {
        friendsType.value = 'groupChat'
        currentChat.value = n
        emit('toggleContact', g)
        chatState.setCurrentTargetFriendId(g.groupId)
        return
    }
    if (g.friendsType === 'user') {
        friendsType.value = ''
        currentChat.value = n
        chatState.setCurrentTargetFriendId(g.friendId)
        emit('toggleContact', g)
    }


}

onMounted(() => {
    chatState.getFriendsList()
    chatState.getGroupList()
})

const handleClose = () => {
    dialogVisible.value = false
}

const confirmHandle = async () => { //创建群
    if (name.value == '') {
        ElNotification({
            title: '提示', message: '群名称不能为空',
            type: 'warning',
        })
        return
    }
    let res = await useMyFetchPostMultipart('/api/chat-groups/add', {
        body: {
            // avatar: avatar.value,
            name: name.value,
            introduce: introduce.value
        }
    }).catch(err => {
        ElNotification({
            title: '提示',
            message: err.message || '创建失败, 请重试！',
            type: 'error',
        })
    })


    if (res.result) {
        ElNotification({
            title: '提示',
            message: '创建成功',
            type: 'success',
        })
        chatState.getGroupList()
        // avatar.value = ''
        introduce.value = ''
        name.value = ''
    }
    dialogVisible.value = false
}


</script>

<style lang="scss">
.flex-row-c-s {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.add-contact-icon {
    cursor: pointer;
    margin-right: 10px;
    color: #296218;
}

.contact-title {
    font-weight: 400;
    font-size: 12px;
    padding: 10px 0 5px 10px;
    color: #5e5e5e;
}

.active-item {
    background: #e9e9e9;
}

.chat-group-wrapper {
    width: 220px;
    height: 620px;
    border-right: 1px solid #ececec;

    .active-group {
        background: #e9e9e9;
    }

    .chat-group-item {
        display: flex;
        align-items: center;
        padding: 12px 0;
        padding-left: 10px;
        cursor: pointer;

        &:hover {
            background: #e7e7e7;
        }

        .group-info-wrapper {
            flex: 1;
            margin-left: 10px;
        }

        .group-item-avarta {
            width: 40px;
            height: 40px;
            border-radius: 5px;
            min-height: 40px;
            object-fit: cover;
        }

        .group-item-name-time {
            display: flex;
            justify-content: space-between;

            .group-item-name {
                width: 70px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                color: #313131;
            }

            .group-item-time {
                margin-right: 10px;
                font-size: 12px;
                color: #929292;
            }
        }

        .group-message {
            width: 150px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #757575;
        }
    }
}
</style>